<template>
	<view class="detail-view">
		<view class="top-bar">
			<uni-navbar :fixed="true" :back="true" color="#fff" :title="title"></uni-navbar>
		</view>

		<view class="form-box">
			<u-form :model="form" ref="uForm">
				<u-form-item class="form-item border-none" required label="议题标题" prop="title">
					<u-input v-model="form.title" type="text" placeholder="请输入议题标题" />
				</u-form-item>

				<u-form-item class="form-item border-none"  required label="议题来源" prop="isSource">
					<view class="isFlex">
						<u-input disabled v-model="form.isSourceName"  type="text" placeholder="请选择议题来源" />
						<!-- <u-icon name="arrow-right" @click="ytlyshow = true" color="#979797" size="32"></u-icon> -->
					</view>
				</u-form-item>

				<u-form-item class="form-item border-none" @click="ytflshow = true" required label="议题分类" prop="classify">
					<view class="isFlex">
						<u-input disabled v-model="form.classifyName" @click="ytflshow = true" type="text" placeholder="请选择议题分类" />
						<u-icon name="arrow-right" @click="ytflshow = true" color="#979797" size="32"></u-icon>
					</view>
				</u-form-item>

				<u-form-item class="form-item "  @click="ytflxqshow = true" required label="议题分类明细" prop="classifyDetail">
					<view class="isFlex">
						<u-input disabled @click="ytflxqshow = true" v-model="form.classifyDetailName" type="text" placeholder="请选择议题分类明细" />
						<u-icon name="arrow-right" @click="ytflxqshow = true" color="#979797" size="32"></u-icon>
					</view>
				</u-form-item>

				<u-form-item class="form-item border-none" required label="提交人" prop="submitName">
					<u-input disabled v-model="form.submitName" type="text" placeholder="请输入提交人" />
				</u-form-item>

				<u-form-item class="form-item border-none" required label="联系电话" prop="phone">
					<u-input  v-model="form.phone" type="text" placeholder="请输入联系电话" />
				</u-form-item>

				<u-form-item class="form-item " required label="所属代表之家" prop="dbzjId">
					<u-input disabled v-model="form.dbzjDeptName" type="text" placeholder="请输入所属代表之家" />
				</u-form-item>

				<u-form-item class="form-item border-none" label="" labelPosition="top" prop="content">
					<u-input inputAlign="left" v-model="form.content" type="textarea" placeholder="请输入您的问题(必填)"
						:clearable="false" :height="160" :maxlength="-1" />
				</u-form-item>

				<u-form-item class="form-item" labelPosition="top">
					<uni-file-upload :type="['all', 'image', 'audio']" :limit="10"></uni-file-upload>
				</u-form-item>

				<u-form-item class="form-item border-none" @click="getLoction" required label="定位地点" prop="addr">
					<view class="isFlex">
						<u-input disabled @click="getLoction" v-model="form.addr" type="text" placeholder="请选择定位地点" />
						<u-icon @click="getLoction" name="arrow-right" color="#979797" size="32"></u-icon>
					</view>
				</u-form-item>

				<u-form-item class="form-item "  label="详细位置" prop="addrDetail">
					<u-input v-model="form.addrDetail" type="text" placeholder="请输入详细位置" />
				</u-form-item>
				
				<!-- <u-form-item v-if="!isWY" class="form-item border-none" @click="getTeam('1')" required label="议题负责人" prop="">
					<view class="isFlex">
						<image class="isFleximage" @click="getTeam('1')" src="@/pagesB/static/tjry.png" mode=""></image>
						
					</view>
				</u-form-item> -->
				
				<!-- <view class="listTist" v-if="allfzrList.length !== 0 && !isWY">
					<text  v-for="(item,index) of allfzrList" :key="index">{{ index == 0 ? item.userName : ',' + item.userName }}</text>
				</view> -->
				 
				<!-- <u-form-item v-if="!isWY" class="form-item border-none" @click="getTeam('2')" required label="议题参与代表" prop="">
					<view class="isFlex">
						<image class="isFleximage" @click="getTeam('2')" src="@/pagesB/static/tjry.png" mode=""></image>
						
					</view>
				</u-form-item> -->
				
				
				<!-- <view class="listTist" v-if="allcyrList.length !== 0 && !isWY">
					<text  v-for="(item,index) of allcyrList" :key="index">{{ index == 0 ? item.userName : ',' + item.userName }}</text>
				</view> -->
				 
				<!-- <u-form-item v-if="!isWY" class="form-item border-none"  required label="公开开始时间" prop="">
					<view class="isFlex">
						<date-time-picker placeholder="请选择议题公开开始时间" fields="day"
							@change="timeChange($event, 'conTime','msxs')">
						</date-time-picker>
					</view> 
				</u-form-item> -->
				
				<!-- <u-form-item v-if="!isWY" class="form-item border-none"  required label="公开结束时间" prop="">
					<view class="isFlex">
						<date-time-picker placeholder="请选择议题公开结束时间" fields="day"
							@change="timeChange($event, 'conTime','msxs2')">
						</date-time-picker>
					</view> 
				</u-form-item> -->
				

			</u-form>
		</view>

		<view class="fiexd-btm">
			<u-button class="form-btn" type="error" @click="confirm">提交</u-button>
		</view>

		<!-- 议题来源 -->
		<u-select v-model="ytlyshow" value-name="value" label-name="name" :list="ytlyList" @confirm="ytlyconfirm"></u-select>
		<!-- 议题来源结束 -->
		
		<!-- 议题分类 -->
		<u-select v-model="ytflshow" value-name="dictValue" label-name="dictName" :list="opinionClassifyList" @confirm="ytflconfirm"></u-select>
		<!-- 议题分类结束 -->
		
		<!-- 议题分类详情 -->
		<u-select v-model="ytflxqshow" value-name="dictValue" label-name="dictName" :list="opinionClassifyxqList" @confirm="ytflxqconfirm"></u-select>
		<!-- 议题分类详情结束 -->
		
		
		
		<ba-tree-picker ref="treePicker" :multiple='true' :selectParent="false" @search="searchTap" @typeTap="typeTap" @select-change="selectChange" title="选择人员"
			:localdata="zbList" valueKey="id" textKey="title" childrenKey="children" />
		
	</view>
</template>

<script>
	import baTreePicker from "@/components/ba-tree-picker/ba-tree-picker.vue";
	import uniFileUpload from '@/components/uni-file-uploader.vue';
	import dateTimePicker from '@/components/uni-datetime-picker';
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			uniFileUpload,
			dateTimePicker
		},
		data() {
			return {
				addr:'',
				fzGksj:'',
				fzGksj2:'',
				fzrList:[],
				allfzrList:[],
				cyrList:[],
				allcyrList:[],
				getTeamType:'1',
				zbList: [],
				isWY:false,
				opinionClassifyxqList:[],
				opinionClassifyList:[],
				distList:[],
				ytflxqshow:false,
				ytflshow:false,
				ytlyshow:false,
				id: '',
				ytlyList:[
					{
						name:'党委点题',
						value:'dwdt'
					},
					{
						name:'人大派题',
						value:'rdpt'
					},
					{
						name:'代表荐题',
						value:'dbjt'
					},
					{
						name:'其他来源',
						value:'qtly'
					}
					// {
					// 	name:'三联一进',
					// 	value:'slyj'
					// },
				],
				form: {
					id: '', //住建
					title: '', //标题
					sno: '', //编号
					currentUserId:'',
					submitBy: '', //提交人id
					submitName: '', //提交人姓名
					submitTime: '', //提交时间
					contact: '', //联系人
					phone: '', //联系电话
					isSource: '', //来源
					content:'',
					isSourceName:'',//来源名称
					classify: '', //信息分类
					classifyName: '',//信息分类名称
					classifyDetail: '', //类型明细
					classifyDetailName: '', //类型明细名称
					dbzjId: '', //所属代表之家
					dbzjDeptId: '', //所属代表之家id
					dbzjDeptIdName: '',//所属代表之家名称
					addr: '', //定位地址
					addrLal: '', //定位经纬度
					addrDetail: '', //详细地址
					iNode: '', //节点
					iReview: '', //过程
					iCases: '', //是否经典
					iOpen: '', //是否公开
					iChannels: '', //征集渠道
					delFlag: '', //删除状态位
					remark: '', //备注
				},
				rules: {
					title: [{
						required: true,
						message: '请输入标题',
						trigger: 'change'
					}],
					isSource: [{
						required: true,
						message: '请选择议题来源',
						trigger: 'change'
					}],
					classify: [{
						required: true,
						message: '请选择议题分类',
						trigger: 'change'
					}],
					classifyDetail: [{
						required: true,
						message: '请选择议题分类明细',
						trigger: 'change'
					}],
					addr: [{
						required: true,
						message: '请选择定位地点',
						trigger: 'change'
					}],
					content: [{
						required: true,
						message: '请输入联系情况内容',
						trigger: 'change'
					}]
				},
				willClue: {
					adoptUser: '',
					clientCode: ''
				}
			};
		},
		onLoad(option) {
			this.loadLogin();
			if (option && option.id) {
				this.id = option.id;
				this.getD()
			}
			// if(this.userInfo){
			// 	this.form.phone = this.userInfo.userInfo.phoneNumber
			// 	this.form.submitName = this.userInfo.sysUser.userName
			// 	this.form.submitBy = this.userInfo.sysUser.id
			// 	this.form.dbzjDeptId = this.userInfo.userInfo.dbzjId
			// 	this.form.dbzjDeptIdName = this.userInfo.userInfo.dbzjName
			// }
			
			// if(this.$roleCodes('weiyuan')){
			// 	this.isWY = true
			// 	this.form.isSourceName = '代表荐题'
			// 	this.form.isSource = 'dbjt'
			// }else{
			// 	this.isWY = false
			// }
			
			
			this.getDict('opinionClassify')
		},
		onShow() {
			this.loadTeam('','dbzj')
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onUnload() {
			this.$store.commit('filePush', []);
		},
		computed: {
			...mapState(['userInfo', 'fileList'])
		},
		methods: {
			getD() {
				let that = this
				let url = '/msIssueInfo/queryAll';
				this.$request(url, {
					id: that.id,
					clientCode: "370782"
				}, {
					load: true
				}).then((res) => {
					that.$store.commit('fileAdd', res.data.fileList_Info);
					// this.fileList = res.data.fileList_Info
					// this.issueAudit = res.data.issueAudit
					this.form = res.data.issueInfo
					// this.msIssueCmt = res.data.msIssueCmt
					// this.msIssueConsult = res.data.msIssueConsult
					// this.msIssueDisclosure = res.data.msIssueDisclosure
					// this.msIssueLike = res.data.msIssueLike
					// this.msIssueOpen = res.data.msIssueOpen
					// this.msIssueSurvey = res.data.msIssueSurvey
					// this.issuePartPepList = res.data.issuePartPepList
					// this.issueChargePepList = res.data.issueChargePepList
				});
			},
			timeChange({
				date,
				dt
			}, idx,aa) {
				
				if(aa == 'msxs'){
					this.fzGksj = date.year + '-' + date.month2 + '-' + date.day2
				}
				
				if(aa == 'msxs2'){
					this.fzGksj2 = date.year + '-' + date.month2 + '-' + date.day2
				}

			},
			getTeam(e){
				this.getTeamType = e
				this.loadTeam('','dbzj')
				this.$refs.treePicker._show();
			},
			//监听选择（ids为数组）
			selectChange(ids, names) {
				let namesList = names.split(',')
				let a = []
				let aa = []
				ids.map((item, index) => {
					let aQ = {
						userId: item,
						userName: namesList[index],
					}
					aa.push(item)
					a.push(aQ)
				})
				
				if(this.getTeamType == '1'){
					this.allfzrList = a
					this.fzrList = aa
				}
				
				if(this.getTeamType == '2'){
					this.allcyrList = a
					this.cyrList = aa
				}
				
				this.loadTeam('','dbzj')
				
				this.$forceUpdate()
			},
			typeTap(e){
				if(e == '1'){
					this.loadTeam('','dbzj')
				}
				
				if(e == '2'){
					this.loadTeam('','dbjb')
				}
				
				if(e == '3'){
					this.zbList = []
				}
			},
			loadTeam(name,type) {
				this.$request('/system/sys-user/tree_users', {
					clientCode: '370782',
					currentUserId: this.userId,
					name:name ? name : '',
					teamType: type
				}).then((res) => {
					this.zbList = res.data;
					// this.waihotsList = res.data;
				});
			},
			searchTap(e,v){
				if(v == ''){
					this.zbList = []
				}else{
					this.$request('/system/sys-user/tree_users', {
						clientCode: '370782',
						currentUserId: this.userId,
						name:v ? v : '',
						teamType: e
					}).then((res) => {
						let a = []
						let aa = []
						if(res.data[0].children){
							if(res.data[0].children[0].children){
								a.push(res.data[0].children[0])
							}else{
								
							}
							if(res.data[0].children[1].children){
								a.push(res.data[0].children[1])
							}else{
								
							}
							if(a.length == 0){
								this.zbList = []
							}else{
								aa = res.data
								aa[0].children = a
								this.zbList = aa
							}
						}else{
							this.zbList = []
						}
						// this.zbList = res.data;
					});
				}
				
				
			},
			getDict(e){
				let that = this
				let url = '/system/sys-dict/dictList';
				this.$request(url, {
					sysDict:{
						dictType:e
					},
					clientCode:'370782'
				}, {
					load: true
				}).then((res) => {
					if(e == 'opinionClassify'){
						that.opinionClassifyList = res.data
					}else{
						that.opinionClassifyxqList = res.data
					}
				});
			},
			ytflconfirm(e){
				this.form.classifyName = e[0].label
				this.form.classify = e[0].value
				this.form.classifyDetailName = ''
				this.form.classifyDetail = ''
				this.getDict(e[0].value)
			},
			ytlyconfirm(e){
				this.form.isSourceName = e[0].label
				this.form.isSource = e[0].value
			},
			ytflxqconfirm(e){
				this.form.classifyDetailName = e[0].label
				this.form.classifyDetail = e[0].value
			},
			getLoction() {
				let that = this
				uni.chooseLocation({
					success: function(res) {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						that.form.addr = res.name
						that.form.addrLal = new String(res.longitude) + ',' + new String(res.latitude)
					}
				});

			},
			loadLogin() {
				if (this.userInfo.sysUser) {
					this.clientCode = this.userInfo.sysUser.clientCode;
					this.userId = this.userInfo.sysUser.id;
					this.form.createName = this.userInfo.sysUser.userName;
				} else {
					this.$logout();
				}
			},
			navTo(e) {
				uni.navigateTo({
					url: e
				});
			},
			confirm() {
				this.$refs.uForm.validate((valid) => {
					if (!valid) {
						return false;
					} else {
						let data = {};
						this.form.clientCode = this.clientCode;
						this.form.createBy = this.userId;
						this.form.currentUserId = this.userId
						data = {
							info:this.form,
							
							fileList: this.fileList
						};
						
						// if(!this.isWY){
						// 	if(this.fzrList.length == 0){
						// 		this.$msg('请选择议题负责人')
						// 		return
						// 	}
							
						// 	if(this.cyrList.length == 0){
						// 		this.$msg('请选择议题参与代表')
						// 		return
						// 	}

						// 	if(!this.fzGksj){
						// 		this.$msg('请选择议题公开开始时间')
						// 		return
						// 	}
							
						// 	if(!this.fzGksj2){
						// 		this.$msg('请选择议题公开结束时间')
						// 		return
						// 	}
							
						// 	data.chargePepArr = this.fzrList
						// 	data.partPepArr = this.cyrList
						// 	data.openStart = this.fzGksj
						// 	data.openEnd = this.fzGksj2
							
						// }
						
						let url = '/msIssueInfo/editBasicInfo';
						this.$request(url, data, {
							load: true
						}).then((res) => {
							this.$msg(res.msg);
							setTimeout(() => {
								uni.navigateBack();
							}, 500);
						});
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	.detail-view {
		background-color: #fff;
	}

	.popup-box {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;
		padding: 30rpx;
		background-color: #fff;

		.h2 {
			margin-bottom: 26rpx;
			font-size: 18px;
			font-weight: 600;
			color: #333;
			line-height: 48rpx;
			text-align: center;
		}

		.summon {
			white-space: pre-wrap;
			font-size: 17px;
			line-height: 54rpx;

			.p {
				margin-bottom: 1em;
			}
		}
	}

	.popup-flex {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.m-box {
		flex-wrap: nowrap;
		flex: 1;
		height: 0;
	}

	.node {
		margin: 20rpx 0 0 20rpx;
		font-size: 14px;
		color: #9b9b9b;
		line-height: 120rpx;
	}

	.form-box {
		.form-item {

			@include mp-flex;
			border-bottom: 20rpx solid #f5f7fa;

			&.border-none {
				border-bottom: 0;
			}
		}

		.form-right {
			display: flex;
			justify-content: flex-end;
			width: 100%;
			text-align: right;

			.image {
				margin-left: 20rpx;
				width: 70rpx;
				height: 70rpx;
			}
		}

		.form-checkbox {
			// padding: 8rpx 0;
			margin: -8rpx 0;
		}
	}

	.fiexd-btm {
		position: static;
		padding: 30rpx;
	}
	
	.isFlex{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex-wrap: wrap;
		
		
	}
	
	.isFleximage{
		width: 48upx;
		height: 48upx;
		padding-right: 20upx;
	}
	
	.listTist{
		padding: 0 30upx;
		text{
			font-size: 17px;
			color: #333333;
			line-height: 120upx;
		}
	}
</style>
